class Main extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            target: {
                name: '',
                describe: '',
                number: '',
                // time:''
            },
            list: [
            ],
            ishide: 'none',
            counts: [],
            cate: [],
            start: 0,
            pagesize: 12,
            keyword: '',
            showswitch: !0,
            pagestart: 0,
            clicknew: !1,
            id: 0,
            isshow: 1,
            imgsrc: "",
            audiosrc: "",
            musicclass: '',
            // shelf:'1',
            cid: "0",
            fileimgshow: !0,
            fileaudioshow: !0,
            ischa:!1,
        };
    }
    formatlist(list) {
        console.log(list.length, 'list.length')
        var listitem = [], { cate } = this.state, nameclass = "",wulist=[];
        if (list.length > 0) {
            list.forEach((x, i) => {
                cate.forEach((y, j) => {
                    if (y.id == x.cid) {
                        nameclass = y.name
                    }
                })
                console.log(list)
                listitem.push(
                    <tr key={i}>
                        <td><p className="td-img"><img src={`${API_HEAD}imgs/${x.topimg}`}/></p></td> 
                        <td className="tdname"><p className="name">{x.name}</p></td>
                        <td className="nameclass tconter">{nameclass}</td>
                        <td className="tconter">{x.goodssn}</td>
                        <td className="tconter">{x.salenum}</td>
                        <td className="tconter">{x.state == "0" ? "上架" : "下架"}</td>
                        <td className="tconter">{x.orders}</td>
                        <td className="operatebox">
                            <div className='operate' id={"ope" + x.id}>
                                <div data-toggle="modal" data-target="#modalOne">
                                    <img src="./src/edit.png" />
                                    <p className='edit' onClick={this.todetail.bind(this, x.id)}>编辑</p>
                                </div>
                                <div>
                                    <img src={`./src/${x.state == "0" ? "lowershelf" : "shelves"}.png`} />
                                    <p className='edit' onClick={this.setshow.bind(this, x.id, x.state)}>{x.state == "0" ? "下架" : "上架"}</p>
                                </div>
                                <div>
                                    <img src="./src/del.png" />
                                    <p className='edit colred' onClick={this.del.bind(this, x.id)}>删除</p>
                                </div>
                            </div>
                        </td>
                    </tr>

                )
            });
        } else {
            wulist.push(
                <p className="wulist">暂无数据</p>
            )
        }
        this.setState({ listitem, list, originallist: list,wulist })
    }
    // 编辑
    todetail(e) {
        window.location.href = "./addgoods.html?id=" + e;
    }
    // 上架下架
    setshow(e, i) {
        let { start } = this.state
        setgoodsstate(e, res => {
            if (res.issuccess == 1) {
                alert(`${i == "0" ? '下架' : '上架'}成功`)
                this.freshlist(start)
            }
        })

    }

    // 删除
    del(e) {
        this.setState({ delid: e }, () => {
            $('#myModal').modal('toggle');
        })
    }
    confirmdel() {
        let { delid, start } = this.state
        Goodsdelgoods(delid, res => {
            if (res.issuccess == 1) {
                alert('删除成功')
                $('#myModal').modal('toggle');
                this.freshlist(start)
            } else {
                $('#myModal').modal('toggle');
                alert(res.msg);
            }
        })
    }

    add() {
        window.location.href = "./addgoods.html";
    }
    replaceraw(content) {
        return content.replace('rgb(', 'rgb').replace(new RegExp('rgb', 'g'), "rgb(");
    }

    searchinput(e) {
        // console.log(e.target.value,'e.target.value')
        this.setState({ keyword: e.target.value })
    }

    componentDidMount() {
        let that = this
        let statehtml = []
        GoodsCategetalllist(res => {
            if (res.issuccess == 1) {
                this.inputlist(res.list);
                statehtml.push(
                    <option value="0">请选择</option>
                )
                res.list.forEach((x, i) => {
                    statehtml.push(
                        <option key={i} value={x.id}>{x.name}
                        </option>
                    )
                })
                this.setState({ statehtml },()=>{
                    that.freshlist(0)
                })
            }
        })


    }
    freshlist(start) {
        let { pagesize, list, cid,keyword } = this.state;
        Goodsgetgoodslist({ pagesize, start, cid,keyword }, res => {
            if (res.issuccess == 1) {
                if (start == 0) {
                    let pagecount = Math.ceil(res.total / pagesize);
                    this.setpager(pagecount, start);
                    this.setState({ start, total: res.total })
                }
                this.formatlist(res.list);
            }
        })
        // this.formatlist(list);

    }
    inputlist(list) {
        var inputhtml = []
        list.forEach((x, i) => {
            inputhtml.push(
                <div key={i} className="radio"><input type="radio" name="radio" value={x.id} id="setmeal0" /><label for="setmeal0"></label><span>{x.name}</span></div>
            )
        })
        this.setState({ inputhtml, cate: list })
    }
    setpage(e) {
        let { pagesize, start } = this.state
        pagesize = parseInt(e)
        start = 0
        this.setState({ pagesize, start }, () => {
            this.freshlist(start)
        })
    }
    setpager(pagecount, start) {
        let counts = [];
        for (let i = 1; i < pagecount + 1; i++) {
            counts.push(start + i)
        }
        this.setState({ counts })
    }
    clickpage(e) {
        console.log(e)
        let { start, pagesize } = this.state
        start = e * pagesize
        this.setState({ pagestart: e, start }, () => {
            this.freshlist(start)
        })
    }


    onstatechange(e) {
        let { cid } = this.state, estate = e.target.value;
        if (cid == estate) return;
        this.setState({ start: 0, cid: estate }, () => {
            this.freshlist(0)
        })
    }
    reset() {
        this.setState({ keyword: '' },()=>{
            this.freshlist(0);
        });
    }
    search() {
        let {start}=this.state
        if (this.state.keyword.length == 0) return;
        this.freshlist(start)
    }
    render() {
        let { clicknew, counts, listitem, pagestart, keyword, showswitch, target, inputhtml, imgsrc, audiosrc,wulist } = this.state;

        return (
            <div className="breadLinebox">
                <Modal content='确定要删除吗？' click={this.confirmdel.bind(this)} />

                <div className="content_wrap panel-default content_wrap">
                    <div className='breadLine '>
                        当前位置 > 优选购管理
                     </div>

                    <div className="content">
                        {/* <div className="tabletit" >
                            <p className="add" data-toggle="modal" data-target="#modalOne" onClick={this.add.bind(this)}>新建</p>

                        </div>
                        <div className="mallradiobox" >
                            <p className="choose-text">选择状态:</p>
                            <select value={this.state.tagcid} onChange={this.onstatechange.bind(this)} className="form-control select">
                                {this.state.statehtml}
                            </select>
                        </div>
                        <div className="search">
                            <input onChange={this.searchinput.bind(this)} value={keyword} type="text" placeholder='请输入商品名称' className />
                            <p onClick={this.search.bind(this)} className="cursor">查询</p>
                            <p onClick={this.reset.bind(this)} className="cursor">返回</p>
                        </div> */}



                        <div className="tabletitbox">
                            <div className="tabletit">
                                <div className="search">
                                    <input onChange={this.searchinput.bind(this)} value={keyword} type="text" placeholder='请输入商品名称' className />
                                    <p onClick={this.search.bind(this)} className="cursor">查询</p>
                                    <p onClick={this.reset.bind(this)} className="cursor">返回</p>
                                </div>
                                <p className="add cursor" onClick={this.add.bind(this)}>新建</p>
                            </div>
                            <div className="mallradiobox" >
                            <select value={this.state.cid} onChange={this.onstatechange.bind(this)} className="form-control select">
                                {this.state.statehtml}
                            </select>
                        </div>
                        </div>



                        <table className="tab">
                            <thead>
                                <tr>
                                    <th>封面</th>
                                    <th>名称</th>
                                    <th className="tconter">分类</th>
                                    <th className="tconter">商品编号</th>
                                    <th className="tconter">销量</th>
                                    <th className="tconter">状态</th>
                                    <th className="tconter">排序</th>
                                    <th className="cz tconter">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {listitem}
                            </tbody>
                        </table>
                        {wulist}
                    </div>
                    <div className="pagerbox">
                        <p>共{this.state.total}条</p>
                        <Pager counts={counts} click={this.clickpage.bind(this)} change={this.setpage.bind(this)} index={pagestart} />
                    </div>
                </div>
            </div>

        )


    }
}









ReactDOM.render(
    <div>
        <TopLine />
        <div id='body'>
            <LeftMenu code='goods' />
            <Main />
        </div>
    </div>
    // <Barrage/>
    , $('.container')[0]
)
